<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BootStrap Test</title>
<!-- BootStrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
	.row div {
		background-color: gray;
		color: white;
	}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
	<h2>예제<small>-그리드-</small></h2>
	<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다. -->
	<div class="row">
	  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
	  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	</div>
	 
	<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다. -->
	<div class="row">
	  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
	</div>
	 
	<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다. -->
	<div class="row">
	  <div class="col-xs-6">.col-xs-6</div>
	  <div class="col-xs-6">.col-xs-6</div>
	</div>
</div>
<div class="container">
	<h2>예제<small>-테이블-</small></h2>
	<div class="table-responsive">
		<table class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
					<th>#</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Username</th>
				</tr>
			</thead>
			<tbody>
				<tr class="active">
					<td>1</td>
					<td>Young hun</td>
					<td>Kim</td>
					<td>YCG</td>
				</tr>
				<tr class="success">
					<td>2</td>
					<td>Sang jun</td>
					<td>Park</td>
					<td>libedi</td>
				</tr>
				<tr>
					<td class="warning">3</td>
					<td>Sang hyun</td>
					<td class="danger">Choi</td>
					<td>coi</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div class="container">
	<h2>예제<small>-기본 폼-</small></h2>
	<form role="form">
		<div class="form-group">
			<label for="examInputEmail1">Email address</label>
			<input type="email" class="form-control" id="examInputEmail1" placeholder="Enter email" />
		</div>
		<div class="form-group">
			<label for="examInputPassword1">Password</label>
			<input type="password" class="form-control" id="examInputPassword1" placeholder="Password" />
		</div>
		<div class="form-group">
			<label for="examInputFile1">File Input</label>
			<input type="file" id="examInputFile1"/>
			<p class="help-block">Example block-level help text here.</p>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox">Check me out
			</label>
		</div>
		<input type="button" class="btn btn-default" value="Submit" />
	</form>
</div>
<div class="container">
	<h2>예제<small>-인라인 폼-</small></h2>
	<form class="form-inline" role="form">
		<div class="form-group">
			<!-- 스크린리더를 위해 input 을 위한 라벨은 반드시 생성하자. -->
			<!-- .sr-only 를 이용하여 라벨 숨기기 -->
			<label class="sr-only" for="examInputEmail2">Email Address</label>
			<input type="email" class="form-control" id="examInputEmail2" placeholder="Enter email"/>
		</div>
		<div class="form-group">
			<!-- .sr-only 를 이용하여 라벨 숨기기 -->
			<label class="sr-only" for="examInputPassword2">Password</label>
			<input type="password" class="form-control" id="examInputPassword2" placeholder="Password"/>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox">Remember me
			</label>
		</div>
		<button type="submit" class="btn btn-default">Sign in</button>
	</form>
</div>
<div class="container">
	<h2>예제<small>-수평 폼-</small></h2>
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<!-- .control-label 로 우측정렬 -->
			<label class="col-lg-2 control-label" for="inputEmail1">Email</label>
			<div class="col-lg-10">
				<input type="email" class="form-control" id="inputEmail1" placeholder="Email"/>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label" for="inputPassword1">Password</label>
			<div class="col-lg-10">
				<input type="password" class="form-control" id="inputPassword1" placeholder="Password"/>
			</div>
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-Textarea-</small></h2>
	<textarea class="form-control" rows="3"></textarea>
</div>
<div class="container">
	<h2>예제<small>-체크박스와 라디오(스택)-</small></h2>
	<form role="form">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="" />Option one is this and that - be sure to include why it's great
			</label>
		</div>
		<br/>
		<div class="radio">
			<label>
				<input type="radio" name="optionRadio" id="optionRadio1" value="option1" checked />
				Option one is this and that - be sure to include why it's great
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionRadio" id="optionRadio2" value="option2" />
				Option two can be something else and selecting it will deselect option one
			</label>
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-체크박스와 라디오(인라인)</small></h2>
	<form role="form">
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox1" value="option1" />1
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox2" value="option2" />2
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox3" value="option3" />3
		</label>
		<br/>
		<label class="radio-inline">
			<input type="radio" name="optionRadio" id="optionRadio1" value="option1" checked />
			Option one
		</label>
		<label class="radio-inline">
			<input type="radio" name="optionRadio" id="optionRadio2" value="option2" />
			Option two
		</label>
	</form>
</div>
<div class="container">
	<h2>예제<small>-셀렉스박스-</small></h2>
	<form role="form">
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<br/>
		<select class="form-control" multiple>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</form>
</div>
<div class="container">
	<h2>예제<small>-정적 컨트롤-</small></h2>
	<form class="form-horizontal" role="form">
		<div class="form-group">
			<label class="col-lg-2 control-label">Email</label>
			<div class="col-lg-10">
				<!-- p 태크에 .form-control-static을 사용하여 수평폼에 텍스트 삽입 -->
				<p class="form-control-static">email@example.com</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label" for="inputPassword">Password</label>
			<div class="col-lg-10">
				<input type="password" class="form-control" id="inputPassword" placeholder="Password"/>
			</div>
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-입력 포커스-</small></h2>
	<input class="form-control" id="focusedInput" type="text" value="This is focused...">
</div>
<div class="container">
	<h2>예제<small>-입력 비활성화-</small></h2>
	<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
<div class="container">
	<h2>예제<small>-fieldset 전체 비활성화-</small></h2>
	<form role="form">
		<fieldset disabled>
			<div class="form-group">
				<label for="disabledTextInput">Disabled input</label>
				<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
			</div>
			<div class="form-group">
				<label for="disabledSelect">Disabled select menu</label>
		      	<select id="disabledSelect" class="form-control">
		        	<option>Disabled select</option>
		      	</select>
	    	</div>
		    <div class="checkbox">
		      	<label>
		        	<input type="checkbox"> Can't check this
		      	</label>
		    </div>
	    	<button type="submit" class="btn btn-primary">Submit</button>
	  	</fieldset>
	</form>
</div>
<div class="container">
	<h2>예제<small>-폼컨트롤 검사상태-</small></h2>
	<form role="form">
		<div class="form-group has-success">
			<label class="control-label" for="inputSuccess">Input with Success</label>
			<input type="text" class="form-control" id="inputSuccess" />
		</div>
		<div class="form-group has-warning">
			<label class="control-label" for="inputWarning">Input with Warning</label>
			<input type="text" class="form-control" id="inputWaring" />
		</div>
		<div class="form-group has-error">
			<label class="control-label" for="inputError">Input with Error</label>
			<input type="text" class="form-control" id="inputError" />
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-폼컨트롤 높이조절-</small></h2>
	<form role="form">
		<input type="text" class="form-control input-lg" placeholder=".input-lg"/>
		<input type="text" class="form-control" placeholder="default input"/>
		<input type="text" class="form-control input-sm" placeholder=".input-sm"/>
		<br/>
		<select class="form-control input-lg">
			<option>.input-lg</option>
		</select>
		<select class="form-control">
			<option>default input</option>
		</select>
		<select class="form-control input-sm">
			<option>.input-sm</option>
		</select>
	</form>
</div>
<div class="container">
	<h2>예제<small>-컬럼 크기조절 및 도움말-</small></h2>
	<form role="form">
		<div class="row">
			<div class="col-lg-2">
				<input type="text" class="form-control" placeholder=".col-lg-2"/>
			</div>
			<div class="col-lg-3">
				<input type="text" class="form-control" placeholder=".col-lg-3"/>
			</div>
			<div class="col-lg-4">
				<input type="text" class="form-control" placeholder=".col-lg-4"/>
				<span class="help-block">폼 컨트롤을 위한 블록레벨의 도움말</span>
			</div>
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-버튼 스타일-</small></h2>
	<form role="form">
		<!-- 기본 버튼 -->
		<input type="button" class="btn btn-default" value="Default" />
		
		<!-- 보기에 무게감을 주어 버튼들중에서 중요한 액션을 알아볼 수 있게끔 합니다. -->
		<input type="button" class="btn btn-primary" value="Primary" />
		
		<!-- 성공적이거나 긍정적인 액션을 가리킵니다. -->
		<input type="button" class="btn btn-success" value="Success" />
		
		<!-- 정보를 제공하는 경보 메시지를 위한 맥락적인 버튼 -->
		<input type="button" class="btn btn-info" value="Info" />
		
		<!-- 이 액션은 조심해야 함을 가리킵니다. -->
		<input type="button" class="btn btn-warning" value="Warning" />
		
		<!-- 위험하거나 부정적일 수 있는 액션을 가리킵니다. -->
		<input type="button" class="btn btn-danger" value="Danger" />
		
		<!-- 버튼을 버튼 동작은 유지하면서 링크와 같은 모양으로 만들어 덜 중요하게 보이게 합니다. -->
		<input type="button" class="btn btn-link" value="Link" />
	</form>
</div>
<div class="container">
	<h2>예제<small>-버튼 크기-</small></h2>
	<form role="form">
		<p>
			<input type="button" class="btn btn-primary btn-lg" value="Large button" />
			<input type="button" class="btn btn-default btn-lg" value="Large button" />
		</p>
		<p>
			<input type="button" class="btn btn-primary" value="Default button" />
			<input type="button" class="btn btn-default" value="Default button" />
		</p>
		<p>
			<input type="button" class="btn btn-primary btn-sm" value="Small button" />
			<input type="button" class="btn btn-default btn-sm" value="Small button" />
		</p>
		<p>
			<input type="button" class="btn btn-primary btn-xs" value="Extra small button" />
			<input type="button" class="btn btn-default btn-xs" value="Extra small button" />
		</p>
	</form>
</div>
<div class="container">
	<h2>예제<small>-블록레벨 버튼-</small></h2>
	<form role="form">
		<div class="col-lg-4">
			<!-- .btn-block을 사용하여 상위 요소의 너비에 맞춰 꽉 채운다. -->
			<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
			<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
		</div>
	</form>
</div>
<div class="container">
	<h2>예제<small>-버튼 비활성화 상태-</small></h2>
	<form role="form">
		<!-- disabled 속성을 추가하여, 버튼을 50% 흐리게 만들어 클릭할 수 없는 것처럼 만든다. -->
		<input type="button" class="btn btn-lg btn-primary" value="Primary button" disabled />
		<button type="button" class="btn btn-default btn-lg" disabled >Button</button>
	</form>
</div>
<div class="container">
	<h2>예제<small>-앵커 비활성화 상태-</small></h2>
	<form role="form">
		<!-- .disabled 를 추가한다. 링크 기능성은 영향을 받지 않는다. -->
		<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
		<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
	</form>
</div>
<div class="container">
	<h2>예제<small>-다양한 버튼 태그-</small></h2>
	<form role="form">
		<!-- 크로스 브라우저 렌더링을 위해 button 태그를 추천 -->
		<a class="btn btn-default" href="#" role="button">Link</a>
		<button class="btn btn-default" type="submit">Button</button>
		<input class="btn btn-default" type="button" value="Input">
		<input class="btn btn-default" type="submit" value="Submit">
	</form>
</div>
<div class="container">
	<h2>예제<small>-이미지-</small></h2>
	<form role="form">
		<!-- IE8 에서는 둥근모서리가 지원되지 않음. -->
		<img src="img/test.png" alt="테스트이미지" class="img-rounded">
		<img src="img/test.png" alt="테스트이미지" class="img-circle">
		<img src="img/test.png" alt="테스트이미지" class="img-thumbnail">
		
		<!-- .img-responsive 를 사용하여 반응형 이미지 적용. 부모요소에 맞추어 자동조절. -->
		<div class="col-lg-2">
			<img src="img/test.png" alt="테스트이미지" class="img-responsive">
		</div>
	</form>
</div>

<!-- JQuery :: before Bootstrap -->
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<!-- BootStrap JS -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>